<template>
  <div class="check-task-container common-check-container">
      <div class="common-list-bread">
        <el-button class="common-btn-solid" size="small"  @click="onClikcGoBack">返回</el-button>
        <span class="check">查看人员</span>
      </div>
      
   
   <div class="check-container common-content-box">
      <div class=""><!-- common-detail-box -->
        <div class="detail-content-box">
          <div class="common-two-box">
            <div class="common-item-box">
              <span class="common-item-label">所属部门：</span>
              <span>
                {{departmentName}}
                <!-- <span v-if="coordinate">（{{coordinate}}）</span> -->
              </span>
            </div>
            <div>
              <span class="common-item-label">所属类别：</span>
              <span>{{resourceCategoryName}}</span>
            </div>
          </div>
          <div class="common-two-box">
            <div class="common-item-box">
              <span class="common-item-label">资源名称：</span>
              <span>
                {{name}}
                <!-- <span v-if="coordinate">（{{coordinate}}）</span> -->
              </span>
            </div>
            <div>
              <span class="common-item-label">资源代号：</span>
              <span>{{code}}</span>
            </div>
          </div>
         
          <div class="common-two-box">
            <div>
              <span class="common-item-label">是否可用：</span>
              <span>{{availableTypeInfo}}</span>
            </div>
            <div>
              <span class="common-item-label">使用期限：</span>
              <span>{{expireType === 1 ? '长期' : startDate+'至'+endDate}}</span>
            </div>
          </div>
          <div class="common-two-box">
            <div>
              <span class="common-item-label">资源标签：</span>
              <span  class="desc">{{resourceTagNames}}</span>
            </div>
            
          </div>
          <div class="common-two-box">
            <div>
              <span class="common-item-label">资源描述：</span>
              <span>{{describe}}</span>
            </div>
          </div>
          
        
      </div>
      <div class="detail-content-box">
          <div class="common-list-bread">
            <span class="check">资源使用历史记录</span>
          </div>
          <div class="box-table">
            <el-table :data="changeHistoryVOList" class="common-check-table">
              <el-table-column prop="code" label="科目代号" min-width="150"></el-table-column>
              <el-table-column prop="name" label="试验科目" min-width="150"></el-table-column>
              <el-table-column prop="telegramNo" label="所属任务" min-width="150">
              </el-table-column>
              <el-table-column label="开始时间" min-width="150">
                <template slot-scope="scope">
                  {{scope.row.startTime ? scope.row.startTime : '--'}}
                </template>
              </el-table-column>
              <el-table-column prop="endTime" label="结束时间" min-width="150"></el-table-column>
              <el-table-column prop="status" label="科目状态" min-width="150"></el-table-column>
            </el-table>
          </div>
        </div>
        <div class="common-footer-box">
          <el-button class="common-btn-primary" @click="jumpToAirportManage">返回</el-button>
        </div>
    </div>
    </div>
  </div>
</template>
<script>
import { ref, reactive ,toRefs } from "@vue/composition-api";

  export default {
    setup(props, { root } ){  
      let typeName = ref({'1':'试验人员','2':'试验装备','3':'试验场地','4':'被测装备'})
      let changeHistoryVOList = ref([]);
      let datas = reactive({
        id: "",
        code: "", //资源代号
        name: "", //资源名称
        describe: "", //资源描述
        resourceCategoryName: "", //所属类别
        departmentName: "", //所属部门

        availableTypeInfo:'',//是否可用
        // availableType:1,//是否可用
        availableReasonType:'',// 不可用原因类型
        availableReason:'',// 不可用原因
        resourceTagNames:'',// 标签名称

        expireType:1,// 使用期限类型
        startDate:'',// 开始时间
        endDate:'',// 	结束时间 
      });

      
    //获取数据回选
     const asyncGetTypeInfo = (id)=> {
        root.$axios.get("/baseresource/getBaseResourceById?id="+ id).then((res) => {
          if (res.data.code === 200) {
            let data = res.data.data;
            Object.keys(data).forEach((item) => {
                datas[item] = data[item]  || '--';
            });
            } else {
            root.$message.error(res.data.msg);
          }
        })
    }
    //获取资源使用历史记录
     const asyncGetHistoryList = (id)=> {
        root.$axios.get("/experimentsubjects/listExperimentSubjects?personId="+ id).then((res) => {
          if (res.data.code === 200) {
            changeHistoryVOList = res.data.data || [];
            } else {
            root.$message.error(res.data.msg);
          }
        })
    }
     //点击--返回
     const onClikcGoBack = ()=> {
        root.$router.push({
          path: '/experimentsPersonnel'/* ,
          query: this.queryParams */
        })
    }
    // asyncGetTypeInfo (root.$route.query.currentTabId);
    // asyncGetHistoryList (root.$route.query.currentTabId);
    return {
      ...toRefs(datas),changeHistoryVOList,typeName,onClikcGoBack
    }
    }
  }
</script>
<style scoped>
  .detail-content-box {
    padding: 50px 20px 10px;
    background-color: #fff;
  }
  .detail-content-box.active {
    padding-top: 20px;
  }
  .detail-content-box.history {
    display: flex;
    padding: 0;
  }
 
  .common-check-table {
    padding:20px;
  }
  .detail-content-box > div {
    margin-bottom: 15px;
  }

   .detail-content-box:nth-child(2) {
    margin-top: 20px;
    padding: 0 0 20px 0;
  }
   .box-table{
    margin: 30px;
  }
  .common-check-table {
    padding:0;
  }
 
  .check{
    padding-left: 10px;
  }
  .i{
    color:#C5C5C5;
  }
 
  .props{
    padding-bottom: 5px;
  }
  .text {
    padding-right:15px;
  }
</style>
